<template>
  <view class="flex-col page">
    <view class="flex-col group_5">
      <view class="flex-col">
        <view class="flex-col group_6">
          <view class="flex-col section_1">
            <view class="justify-between group_7">
              <text class="text_6">全部</text>
              <text class="text_7">进行中</text>
              <text class="text_8">已完成</text>
            </view>
            <view class="section_2"> </view>
          </view>
          <view class="divider view"> </view>
        </view>
        <view class="flex-col group_8">
          <view class="flex-row group_9">
            <view class="flex-col section_3">
              <view class="section_4"> </view>
            </view>
            <view class="flex-col group_10">
              <view class="justify-between">
                <text class="text_9">顾客姓名：张三</text>
                <view class="flex-col items-center text-wrapper">
                  <text>接单中</text>
                </view>
              </view>
              <text class="text_11">服务时间：3个小时</text>
              <text class="text_12">服务日期：2022-1-31 12:00</text>
              <text class="text_13">服务地点：湖南长沙雨花区2#1612</text>
            </view>
          </view>
          <view class="justify-between group_12">
            <text class="text_14">订单号：2022011254582</text>
            <view class="flex-row">
              <view class="flex-col items-center text-wrapper_1">
                <text>接受</text>
              </view>
              <view class="flex-col items-center text-wrapper_2">
                <text>拒绝</text>
              </view>
            </view>
          </view>
          <view class="flex-row group_14">
            <view class="flex-col section_5">
              <view class="section_4"> </view>
            </view>
            <view class="flex-col group_15">
              <view class="justify-between">
                <text class="text_17">顾客姓名：张三</text>
                <view class="flex-col items-end text-wrapper_3">
                  <text class="text_18">已完成</text>
                </view>
              </view>
              <text class="text_19">服务时间：3个小时</text>
              <text class="text_20">服务日期：2022-1-31 12:00</text>
              <text class="text_21">服务地点：湖南长沙雨花区2#1612</text>
            </view>
          </view>
          <text class="text_22">订单号：2022011254582</text>
          <view class="divider view_3"> </view>
        </view>
      </view>
    </view>
    <view class="justify-between tab-bar">
      <view class="flex-col items-center group_17">
        <image src="../../assets/16419679722025059627.png" class="image_6" />
        <text class="text_23">首页</text>
      </view>
      <view class="group_18 flex-col items-center view_4">
        <image src="../../assets/16419679722023466430.png" class="image_6" />
        <text class="text_24">厨师</text>
      </view>
      <view class="group_18 flex-col items-center view_5">
        <image src="../../assets/16419679722029284949.png" class="image_6" />
        <text class="text_25">订单</text>
      </view>
      <view class="flex-col items-center group_19">
        <image src="../../assets/16419679722031103037.png" class="image_6" />
        <text class="text_26">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {};
    },
  };
</script>

<style scoped lang="scss">
  .page {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
    overflow-y: auto;
    .group_5 {
      flex: 1 1 auto;
      overflow-y: auto;
      .group_6 {
        padding: 16rpx 22rpx 16rpx 23rpx;
        .section_1 {
          padding-left: 20rpx;
          padding-right: 8rpx;
          background-color: rgb(255, 255, 255);
          border-radius: 10rpx;
          border: solid 2rpx rgb(238, 238, 238);
          .group_7 {
            padding: 22rpx 4rpx 22rpx 7rpx;
            .text_6 {
              color: rgb(255, 180, 0);
              font-size: 28rpx;
              line-height: 26rpx;
              white-space: nowrap;
            }
            .text_7 {
              color: rgb(172, 170, 170);
              font-size: 28rpx;
              line-height: 26rpx;
              white-space: nowrap;
            }
            .text_8 {
              color: rgb(172, 170, 170);
              font-size: 28rpx;
              line-height: 26rpx;
              white-space: nowrap;
            }
          }
          .section_2 {
            background-color: rgb(255, 180, 0);
            width: 69rpx;
            height: 2rpx;
          }
        }
        .view {
          margin-top: 17rpx;
        }
      }
      .group_8 {
        padding: 0 22rpx 319rpx 23rpx;
        .group_9 {
          padding: 15rpx 11rpx 34rpx;
          border-bottom: solid 2rpx rgb(238, 238, 238);
          .section_3 {
            background-image: url('http://images.wanjunshijie.com/product/cook/assets/2fd01b32027aabf37309dd9c953c9a0c.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 153rpx;
            height: 175rpx;
          }
          .group_10 {
            margin-left: 34rpx;
            margin-bottom: 4rpx;
            flex: 1 1 auto;
            .text_11 {
              margin-top: 23rpx;
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 24rpx;
              white-space: nowrap;
            }
            .text_12 {
              margin-top: 25rpx;
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 24rpx;
              white-space: nowrap;
            }
            .text_13 {
              margin-top: 25rpx;
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 25rpx;
              white-space: nowrap;
            }
            .text_9 {
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 24rpx;
              white-space: nowrap;
            }
            .text-wrapper {
              padding: 4rpx 0;
              color: rgb(255, 255, 255);
              font-size: 20rpx;
              line-height: 19rpx;
              white-space: nowrap;
              background-color: rgb(255, 180, 0);
              border-radius: 14rpx;
              width: 86rpx;
              height: 27rpx;
            }
          }
        }
        .group_12 {
          padding: 12rpx 12rpx 10rpx;
          border-bottom: solid 2rpx rgb(238, 238, 238);
          .text_14 {
            align-self: center;
            color: rgb(151, 150, 150);
            font-size: 24rpx;
            line-height: 23rpx;
            white-space: nowrap;
          }
          .text-wrapper_1 {
            padding: 9rpx 0 10rpx;
            color: rgb(228, 139, 0);
            font-size: 26rpx;
            line-height: 25rpx;
            white-space: nowrap;
            background-color: rgb(254, 244, 219);
            border-radius: 10rpx;
            width: 111rpx;
            height: 47rpx;
            border: solid 2rpx rgb(255, 180, 0);
          }
          .text-wrapper_2 {
            margin-left: 14rpx;
            padding: 9rpx 0 10rpx;
            color: rgb(228, 139, 0);
            font-size: 26rpx;
            line-height: 24rpx;
            white-space: nowrap;
            border-radius: 10rpx;
            width: 111rpx;
            height: 47rpx;
            border: solid 2rpx rgb(255, 180, 0);
          }
        }
        .group_14 {
          margin-top: 15rpx;
          padding: 33rpx 11rpx 32rpx;
          border-top: solid 2rpx rgb(238, 238, 238);
          border-bottom: solid 2rpx rgb(238, 238, 238);
          .section_5 {
            background-image: url('http://images.wanjunshijie.com/product/cook/assets/57caf9bd34f15819c824310cdbd94577.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: 153rpx;
            height: 175rpx;
          }
          .group_15 {
            margin-left: 34rpx;
            margin-bottom: 4rpx;
            flex: 1 1 auto;
            .text_19 {
              margin-top: 23rpx;
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 24rpx;
              white-space: nowrap;
            }
            .text_20 {
              margin-top: 25rpx;
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 24rpx;
              white-space: nowrap;
            }
            .text_21 {
              margin-top: 25rpx;
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 25rpx;
              white-space: nowrap;
            }
            .text_17 {
              color: rgb(36, 35, 35);
              font-size: 26rpx;
              line-height: 24rpx;
              white-space: nowrap;
            }
            .text-wrapper_3 {
              padding: 4rpx 0;
              color: rgb(139, 137, 137);
              font-size: 20rpx;
              line-height: 19rpx;
              white-space: nowrap;
              background-color: rgb(242, 242, 242);
              border-radius: 14rpx;
              height: 27rpx;
              .text_18 {
                margin-right: 3rpx;
              }
            }
          }
        }
        .text_22 {
          margin-left: 12rpx;
          margin-top: 24rpx;
          color: rgb(151, 150, 150);
          font-size: 24rpx;
          line-height: 23rpx;
          white-space: nowrap;
        }
        .view_3 {
          margin-top: 23rpx;
        }
        .section_4 {
          height: 175rpx;
          border: solid 2rpx rgb(254, 209, 0);
        }
      }
      .divider {
        background-color: rgb(238, 238, 238);
        height: 2rpx;
      }
    }
    .tab-bar {
      padding: 7rpx 55rpx 29rpx 62rpx;
      .group_17 {
        color: rgb(0, 0, 0);
        font-size: 22rpx;
        line-height: 22rpx;
        white-space: nowrap;
        width: 59rpx;
        height: 81rpx;
        .text_23 {
          margin-top: 5rpx;
        }
      }
      .group_18 {
        width: 59rpx;
        height: 81rpx;
        .text_24 {
          margin-top: 6rpx;
        }
        .text_25 {
          margin-top: 5rpx;
        }
      }
      .view_4 {
        color: rgb(0, 0, 0);
        font-size: 22rpx;
        line-height: 21rpx;
        white-space: nowrap;
      }
      .view_5 {
        color: rgb(0, 0, 0);
        font-size: 22rpx;
        line-height: 22rpx;
        white-space: nowrap;
      }
      .group_19 {
        color: rgb(0, 0, 0);
        font-size: 22rpx;
        line-height: 20rpx;
        white-space: nowrap;
        width: 60rpx;
        height: 80rpx;
        .text_26 {
          margin-top: 6rpx;
        }
      }
      .image_6 {
        width: 54rpx;
        height: 54rpx;
      }
    }
  }
</style>